<template>
<div class="label-box">
  <div class="label-head">
    <span>系统标签</span>
  </div>
  <div class="label-content">
    <div class="label-search">
      <a-button class="search-btn2" @click="showModal">
        <template #icon>
          <PlusOutlined />
        </template>
        新增</a-button>
      <div class="label-input" v-if="visible">
        <a-input :style="{width: '300px'}" v-model:value="labelVal" placeholder="请输入新增系统标签"></a-input>
      </div>
      <div class="label-btn" v-if="visible">
        <a-button type="text" class="label-btn1" @click="handleOk">保存</a-button>
        <a-button type="text" class="label-btn1" @click="onCanelClose">取消</a-button>
      </div>
    </div>
    <div class="label-tag">
      <div class="tag-item" v-for="(item) in TagArr" :key="item.id">
        <div class="item-txt">
          <a-input v-if="item.isEdit" v-model:value="editValue" allow-clear placeholder="请编辑"/>
          <span v-else> {{item.labelValue}}</span>
        </div>
        <span v-if="item.isEdit">
           <span  @click="saveEdit(item)" :style="{color: '#0062AD', cursor: 'pointer'}">保存</span>
           <span  @click="cancelEdit(item)" :style="{color: '#0062AD', cursor: 'pointer', paddingLeft: '20px'}">取消</span>
        </span>
        <EditOutlined v-else @click="edit(item)" :style="{marginTop: '15px'}"/>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted} from 'vue'
const { proxy  } = getCurrentInstance()
import { EditOutlined, PlusOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
const editValue = ref('')
const TagArr = ref([])
const visible = ref(false)
const labelVal = ref('')
const showModal = () => {
  visible.value = true
  labelVal.value = ''
  console.log('点击了没')
}
const handleOk = () => {
  proxy.$api.postAddLabel({labelValue: labelVal.value}).then(res => {
    if (res.resultCode === 0) {
      message.success('新增标签成功')
      visible.value = false;
      getList()
    }
  })
}
const onCanelClose = () => {
  visible.value = false;
}
const edit = (item) => {
  TagArr.value.map(tItem => {
    if (item.id === tItem.id) {
      Object.assign(item, {
        isEdit: true
      })
      editValue.value = item.labelValue
    }
  })
}
const saveEdit = (item) => {
 proxy.$api.putLabel({id: item.id, labelValue: editValue.value}).then(res => {
   if (res.resultCode === 0) {
     message.success('修改标签成功')
     getList()
   }
 })
}
const cancelEdit = (val) => {
  TagArr.value.map(item => {
    if (item.id === val.id) {
      Object.assign(item, {
        labelValue: item.labelValue,
        isEdit: !val.isEdit
      })
    }
  })
}
const getList = () => {
  proxy.$api.postLabelList().then(res => {
    TagArr.value = res.resultObject
    TagArr.value.map(item => {
      Object.assign(item, {
        id: item.id.toString(),
        isEdit: false
      })
    })
  })
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.label-box {
  background: #ffffff;
  height: 100%;
  padding: 0 18px;
  .label-head {
    height: 70px;
    line-height: 70px;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    width: 100%;
    border-bottom: 1px solid #DCDEE0;
  }
  .label-content {
    .label-search {
      display: flex;
      margin-top: 32px;
      margin-bottom: 24px;
      .label-input {
        margin: 0 10px;
      }
      .label-btn {
        display: flex;
        .label-btn1 {
          color: #F5001D;
        }
      }
    }
    .label-tag {
      display: flex;
      flex-wrap: wrap;
      .tag-item {
        min-width: 180px;
        height: 48px;
        background: #f5f8fa;
        border-radius: 4px;
        line-height: 48px;
        font-size: 14px;
        color: #2C3749;
        border: 0;
        padding: 0 24px 0 18px;
        text-align: left;
        display: flex;
        justify-content: space-between;
        margin-right: 32px;
        margin-bottom: 15px;
        .item-txt {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
